<template>
  <div class="safety-dashboard">
    <div class="text-container">
      <div>校园安全监控区域数据统计</div>
    </div>
    <div class="chart-section">
      <!-- 区域报警情况 -->
      <div id="alarmChart" class="chart-container chart-box"></div>
      <!-- 监控设备状态 -->
      <div id="deviceStatusChart" class="chart-container chart-box"></div>
    </div>
    <div class="chart-section">
      <!-- 安全事件趋势 -->
      <div id="eventTrendChart" class="chart-container chart-box"></div>
    </div>
  </div>
</template>

<script>
import { Column, Line } from '@antv/g2plot';

export default {
  name: 'SafetyDashboard',
  data() {
    return {
      alarmData: [
        { region: '东区', value: 120 },
        { region: '西区', value: 80 },
        { region: '南区', value: 100 },
        { region: '北区', value: 90 },
      ],
      deviceStatusData: [
        { device: '监控摄像头 A', status: '在线' },
        { device: '监控摄像头 B', status: '离线' },
        { device: '门禁系统 A', status: '在线' },
        { device: '门禁系统 B', status: '在线' },
      ],
      eventTrendData: [
        { date: '2024-01-01', value: 10 },
        { date: '2024-01-02', value: 15 },
        { date: '2024-01-03', value: 13 },
        { date: '2024-01-04', value: 20 },
        { date: '2024-01-05', value: 18 },
        { date: '2024-01-06', value: 25 },
        { date: '2024-01-07', value: 30 },
      ],
    };
  },
  mounted() {
    this.renderCharts();
  },
  methods: {
    renderCharts() {
      this.renderAlarmChart();
      this.renderDeviceStatusChart();
      this.renderEventTrendChart();
    },

    renderAlarmChart() {
      const chart = new Column('alarmChart', {
        autoFit: true,
        height: 350,
        data: this.alarmData,
        padding: [20, 20, 50, 40],
        xField: 'region',
        yField: 'value',
        colorField: 'region',
        color: ['#58A6FF', '#F76C6C', '#F5A623', '#9B59B6'],
        label: {
          position: 'top',
          style: {
            fill: '#333',
            fontSize: 14,
            fontWeight: 'bold',
          },
        },
        meta: {
          region: { alias: '区域' },
          value: { alias: '报警数', formatter: (val) => `${val} 次` },
        },
        animation: {
          appear: {
            animation: 'scale-in-x',
            duration: 800,
          },
        },
      });
      chart.render();
    },

    renderDeviceStatusChart() {
      const chart = new Column('deviceStatusChart', {
        autoFit: true,
        height: 350,
        data: this.deviceStatusData,
        padding: [20, 20, 50, 40],
        xField: 'device',
        yField: 'status',
        colorField: 'status',
        color: ['#4CAF50', '#FF5733'],
        label: {
          position: 'middle',
          style: {
            fill: '#333',
            fontSize: 14,
            fontWeight: 'bold',
          },
        },
        meta: {
          status: { alias: '设备状态' },
        },
        animation: {
          appear: {
            animation: 'scale-in-x',
            duration: 800,
          },
        },
      });
      chart.render();
    },

    renderEventTrendChart() {
      const chart = new Line('eventTrendChart', {
        autoFit: true,
        height: 350,
        data: this.eventTrendData,
        padding: [20, 20, 50, 40],
        xField: 'date',
        yField: 'value',
        smooth: true,
        color: '#FFBB33',
        label: {
          style: {
            fill: '#333',
            fontSize: 12,
            fontWeight: 'bold',
          },
        },
        point: {
          shape: 'circle',
          size: 5,
          style: {
            fill: '#FFBB33',
            lineWidth: 2,
          },
        },
        animation: {
          appear: {
            animation: 'fade-in',
            duration: 1000,
          },
        },
      });
      chart.render();
    },
  },
};
</script>

<style scoped>
.safety-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding: 30px;
}

.chart-section {
  display: flex;
  flex-direction: row;
  gap: 30px;
  justify-content: center;
}

.chart-container {
  width: 600px;
  height: 350px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  overflow: hidden;
}

.chart-box {
  background: linear-gradient(to top, #f5f7fa, #e5e9f2);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.chart-container .g2-tooltip {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .chart-section {
    flex-direction: column;
    gap: 20px;
  }

  .chart-container {
    width: 100%;
    max-width: 600px;
  }
}

/* 文字容器 */
/* 样式容器 */
/* 样式容器 */
.text-container {
  text-align: center;
  padding: 50px;
  background: linear-gradient(45deg, #6a11cb, #2575fc, #00b4d8, #4caf50);
  background-size: 400% 400%;
  animation: gradientBackground 10s ease infinite;
  border-radius: 10px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  margin: 0 auto;
}

/* 文字渐变效果 */
.text-container div {
  font-size: 36px;
  font-weight: bold;
  color: transparent;
  background: linear-gradient(45deg, #ff7e5f, #feb47b, #6a11cb, #2575fc);
  /* 更柔和的渐变色 */
  background-clip: text;
  -webkit-background-clip: text;
  animation: textGradient 5s ease infinite;
  display: inline-block;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.4);
}

/* 动态背景渐变动画 */
@keyframes gradientBackground {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* 文字渐变动画 */
@keyframes textGradient {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

/* 放大缩小动画 */
.text-container div:hover {
  animation: bounce 0.6s ease-in-out;
}

/* 放大缩小效果 */
@keyframes bounce {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}</style>
